<template>
    <div class="record">
        <overlay v-if="showMaskLayer" />
        <div class="record-wrap" v-else>
            <helper v-if="!billsData.length">
                <svg class="icon" aria-hidden="true" slot="image">
                    <use xlink:href="#icon-xiaofeijilu"></use>
                </svg>
                <span slot="helperText">{{ $t("noBill") }}</span>
            </helper>
            <div class="bills">
                <div class="mybill" v-for="(item, index) in billsData" :key="index">
                    <div class="userAvtar">
                        <template v-if="item.transactionType !== 3">
                            <svg class="icon" aria-hidden="true">
                                <template v-if="item.transactionType === 1">
                                    <use xlink:href="#icon-chongzhi" />
                                </template>
                                <template v-else>
                                    <use xlink:href="#icon-tixian" />
                                </template>
                            </svg>
                        </template>
                        <img :src="item.avatar" v-else alt="" />
                    </div>
                    <div class="billContent">
                        <div class="detail">
                            <div class="billType">
                                {{transactionType(item.transactionType, item.fromAccount, item.nickname) }}
                            </div>
                            <div class="dealDate">
                                {{ item.transactionTime | dateformat("YYYY年MM月DD日 HH:mm:ss") }}
                            </div>
                        </div>
                        <div
                                class="billPrice"
                                :class="showTag(item.transactionType, item.fromAccount) === '+' ? 'income' : 'expend'">
                            {{showTag(item.transactionType, item.fromAccount) + item.transactionMoney}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import helper from 'components/content/helper/helper';
import { mapState, mapMutations } from 'vuex';
import overlay from 'components/content/overlay/overlay.vue';

export default {
    name: 'record',
    components: {
        helper,
        overlay
    },
    data () {
        return {
            billsData: []
        };
    },
    created () {
        this.resetStatus({ state: 'showMaskLayer', status: true });
        this.$api.billsApi.find({ id: localStorage.getItem('id') }).then(res => {
            this.billsData = res.data;
        }).then(() => {
            this.resetStatus({ state: 'showMaskLayer', status: false });
        });
    },
    methods: {
        showTag (transactionType, fromAccount) {
            const symbolsArray = ['+', '-'];
            if (transactionType !== 3) {
                return symbolsArray[transactionType - 1];
            } else {
                return localStorage.getItem('id') === fromAccount ? '-' : '+';
            }
        },
        transactionType (type, account, nickname) {
            if (type !== 3) {
                return this.recordType[type - 1];
            } else {
                return account === localStorage.getItem('id')
                    ? this.$t('transferTo') + nickname
                    : this.$t('transferFrom') + nickname;
            }
        },
        ...mapMutations(['resetStatus'])
    },
    computed: {
        recordType () {
            return ['充值', '提现', '转账'];
        },
        ...mapState(['showMaskLayer'])
    }
};
</script>

<style scoped lang="less" src="./less/wallet-record.less"></style>
